<template>
  <div class="topwrap" :style="wrapstyle">
    <div class="header">小卡拉米的菜园子</div>
    <div>
      <div class="btn" @click="clickbtn">点击去使用 ></div>
    </div>
  </div>
</template>

<script>
import dd from '../assets/9.jpg';
export default {
  layout: 'barHeight',
  data() {
    return {
      wrapstyle: { backgroundImage: `url(${dd})` },
    };
  },
  methods: {
    clickbtn() {
      location.href = 'https://www.xnbz.site/web';
    },
  },
};
</script>
<style lang="less" scoped>
.topwrap {
  // background-image: ;
  height: calc(100vh - 40px);
  background-size: cover;

  .header {
    position: fixed;
    color: #ee610aed;
    left: 0;
    right: 0;
    top: 0;
    height: 45px;
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 500;
    background: #ffffff5c;
    padding-left: 60px;
  }
  .btn {
    position: absolute;
    bottom: 50px;
    right: 0;
    background: white;
    background: #ffffff5c;
    border-radius: 8px;
    padding: 10px 20px;
    color: #ee610aed;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
  }
}
</style>
